<template>
	<view class="page u-skeleton">
		<view class="u-flex u-row-between u-padding-20 top u-skeleton-rect">
			<view class="u-flex">
				<u-icon name="map-fill" color="#fff" size="36"></u-icon>
				<view style="font-size: 30rpx;margin-left: 10rpx;color: #fff;">{{city}}</view>
			</view>
			<view class="" style="position: relative;">
				<view style="width: 550rpx;">
					<u-search placeholder="搜索技师姓名" v-model="initial.parm.nickname" :animation="true" bg-color="#fff"
						:action-style="{color:'#fff',}" @custom="search" @search="search">
					</u-search>
				</view>
			</view>
		</view>


		<u-swiper class="u-skeleton-rect" :list="banner" name="image" height="400" mode="dot" @click="clkBanner">
		</u-swiper>


		<u-tabs active-color="#00C08D" :current="current" :is-scroll="false" :list="tabs" @change="Ctabs"></u-tabs>


		<view @click="go(item)" class=" u-flex u-padding-20 list" v-for="(item,index) in list" :key="index">
			<view class="u-skeleton-circle">
				<u-image radius="20" :src="item.avatar" width="150" height="150"></u-image>
			</view>
			<view class=" u-margin-left-20" style="width: 520rpx;">
				<view class="u-flex u-row-between">
					<view class="u-flex u-skeleton-rect">
						<view class="u-font-weight ">{{item.nickname}}</view>
						
						<view class="u-font-25 u-margin-left-20">{{item.age}}岁</view>
						
						<view class="u-margin-left-20 ">
							<u-image src="/static/woman.png" width="30" height="30"></u-image>
						</view>
					</view>
					<view class="u-skeleton-rect">
						<u-button size="mini" shape="circle" :type="item.is_on_line? 'success':'info' ">
							{{item.is_on_line? '在线':'离线'}}
						</u-button>
					</view>
				</view>
				<view
					class="u-skeleton-rect u-flex u-row-between u-margin-top-20 u-margin-bottom-20 u-font-xs u-type-info">
					<view class="">
						<u-rate disabled :value="item.star" size="17" active-color="#FFCC00"></u-rate>
					</view>
					<view class="">
						服务：<text style="color: #00C08D;">{{item.service_number}}</text>单
					</view>
					<view class="">
						<text>浏览量：<text style="color: #00C08D;">{{item.view_number}}</text></text>
					</view>
				</view>
				<view class="u-flex u-row-between ">
					<view class="u-flex ">
						<view class="u-margin-right-10 u-skeleton-rect" v-for="(item1,index1) in item.project_ids_arr"
							:key="index1">
							<view class="u-line-1" style="padding: 4rpx; width: 90rpx;border: 1rpx solid #E1E1E1;text-align: center;border-radius: 10rpx;color: #484848;font-size: 22rpx;" v-if="index1<3">{{item1.name}}</view>
							<!-- <u-tag bg-color="#fff" plain type='info ' size="mini" :text=""></u-tag> -->
						</view>
					</view>
					<view style="color: #00C08D;font-size: 26rpx;" class="u-skeleton-rect">
						<u-icon name="map-fill" color="#00C08D" size="26"></u-icon>
						<text class="u-margin-left-20">{{item.distance}}</text>
					</view>
				</view>
			</view>


		</view>



		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF" el-color="#ddd"></u-skeleton>


		<u-loadmore :status="initial.status" />
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState,
	} from 'vuex';
	import loader from '@/common/loadPage.js';

	import Location from '@/common/location.js';

	export default {
		mixins: [loader],
		data() {
			
			return {
				loading: true,
				city: 'Hello',
				list: [{
					project_ids_arr: [{}, {}, {}]
				}, {
					project_ids_arr: [{}, {}, {}]
				}, {
					project_ids_arr: [{}, {}, {}]
				}, {
					project_ids_arr: [{}, {}, {}]
				}, {
					project_ids_arr: [{}, {}, {}]
				}, {
					project_ids_arr: [{}, {}, {}]
				}],
				current: 0,
				initial: {
					geturl: "/technician/index",
					parm: {
						nickname: '',
						star: '',
						is_recomm: 1,
						is_on_line: 1
					},
					isPage: true
				},
				banner: [],

				tabs: [{
					name: '推荐',
				}, {
					name: '星级排行',
				}, {
					name: '在线',
				}]
			}
		},
		onLoad() {

			this.getBanner()
		},
		onShow() {

			  this.getLocation()
			
			
		},



		methods: {
			getLocation() {
				 const location = new Location();
				// #ifdef MP-WEIXIN
				   location.wxgetLocation().then(res => {
				   	this.initial.parm.lat = res.result.location.lat;
				   	this.initial.parm.lng = res.result.location.lng;
				   	this.city = res.city;
				   	this.jiazai()
				   }).catch(err => {})
				// #endif
				// #ifdef H5
				  location.H5getLocation().then(res => {
						this.initial.parm.lat = res.result.location.lat;
						this.initial.parm.lng = res.result.location.lng;
						this.city = res.city;
						
						console.log(res.city,"res.city")
						this.jiazai()
				   }).catch(err => {})
				// #endif
				
			},
			jiazai() {
				this.initial.page = 1;
				this.getGoods().then(res => {
					this.loading = false
				})

			},
			search(e) {
				this.jiazai()
			},

			Ctabs(e) {

				this.current = e;
				if (e == 0) {
					this.initial.parm.star = '';
					this.initial.parm.is_recomm = 1;
					this.initial.parm.is_on_line = 1;
				}
				if (e == 1) {
					this.initial.parm.star = 1,
						this.initial.parm.is_on_line = '';
					this.initial.parm.is_recomm = '';
				}
				if (e == 2) {
					this.initial.parm.star = '',
						this.initial.parm.is_recomm = '';
					this.initial.parm.is_on_line = 1;
				}
				this.jiazai()

			},
			getBanner() {
				this.$u.post('/index/banner', {}).then(res => {
					console.log(res)
					this.banner = res;
				}).catch(err => {})
			},
			clkBanner(e) {
				uni.navigateTo({
					url: this.banner[e].url
				})
			},
			go(item) {
				uni.navigateTo({
					url: "../detail/index?id=" + item.id
				})
			}
		}
	}
</script>

<style>
	.page {
		background: #f8f8f8;
		height: 100vh;
	}

	.top {
		background: #00C08D;
	}

	.list {
		background: #fff;
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	}
</style>
